<template>
  <div class="gimbal-focusing" v-if="cameraType !== '0'">
    <div class="gimbal-operation-box">
      <div class="gimbal-operation-box-item">
        <div class="inside">
          <div class="inside-left">
            <svg-icon icon-class="left" class="svg-icon-play" @mousedown="handleMouseDown('LEFT')" @mouseup="handleMouseUp('LEFT')" />
          </div>
          <div class="inside-right">
            <svg-icon icon-class="right" class="svg-icon-play" @mousedown="handleMouseDown('RIGHT')" @mouseup="handleMouseUp('RIGHT')" />
          </div>
          <div class="inside-top">
            <svg-icon icon-class="top" class="svg-icon-play" @mousedown="handleMouseDown('UP')" @mouseup="handleMouseUp('UP')" />
          </div>
          <div class="inside-bottom">
            <svg-icon icon-class="bottom" class="svg-icon-play" @mousedown="handleMouseDown('DOWN')" @mouseup="handleMouseUp('DOWN')" />
          </div>
          <svg-icon icon-class="Gimbal-icon" class="svg-icon" />
        </div>
      </div>
    </div>
    <div class="focusing-box">
      <div title="焦点前移">
        <svg-icon icon-class="frontFocusing" class="focusing" @click="handleMouseDown('FOCUS_NEAR')" />
      </div>
      <div title="焦点后移">
        <svg-icon icon-class="focusShiftedBackwards" class="focusing" @click="handleMouseDown('FOCUS_FAR')" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { controlling } from '@/api/video';

const { cameraIndexCode, cameraType } = defineProps(['cameraIndexCode', 'cameraType']);
//长按控制云台
const handleMouseDown = (position) => {
  const params = {
    cameraIndexCode,
    action: 0,
    command: position
  };
  controlling(params).then((res) => {});
};
//松开关闭云台
const handleMouseUp = (position) => {
  const params = {
    cameraIndexCode,
    action: 1,
    command: position
  };
  controlling(params).then((res) => {
    console.log('关闭', position, res);
  });
};
</script>

<style lang="scss" scoped>
.gimbal-focusing {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 3%;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #8f8c87;
  z-index: 99999;

  .gimbal-operation-box {
    background-color: #575655;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: rgb(255, 255, 255);
    position: relative;

    .gimbal-operation-box-item {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #8f8c87;

      .inside {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #8f8c87;

        .inside-left,
        .inside-right,
        .inside-top,
        .inside-bottom {
          position: absolute;
          background-color: #8f8c87;

          .svg-icon-play {
            width: 30px;
            height: 14px;
            cursor: pointer;
            z-index: 999;
          }
        }

        .inside-left {
          left: -16px;
          top: 50%;
          width: 28px;
          height: 16px;
          border-top: 2px solid #7e7c78;
          border-bottom: 2px solid #7e7c78;
          transform: translateY(-50%);

          .svg-icon-play {
            margin-left: -8px;
          }
        }

        .inside-right {
          right: -16px;
          top: 50%;
          width: 28px;
          height: 16px;
          border-top: 2px solid #7e7c78;
          border-bottom: 2px solid #7e7c78;
          transform: translateY(-50%);

          .svg-icon-play {
            margin-left: 10px;
          }
        }

        .inside-top {
          left: 50%;
          top: -16px;
          width: 16px;
          height: 28px;
          border-left: 2px solid #7e7c78;
          border-right: 2px solid #7e7c78;
          transform: translateX(-50%);

          .svg-icon-play {
            margin-top: -7px;
          }
        }

        .inside-bottom {
          position: absolute;
          left: 50%;
          bottom: -16px;
          width: 16px;
          height: 28px;
          background-color: #8f8c87;
          border-left: 2px solid #7e7c78;
          border-right: 2px solid #7e7c78;
          transform: translateX(-50%);

          .svg-icon-play {
            margin-top: 9px;
          }
        }

        .svg-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 30px;
          height: 30px;
        }
      }
    }
  }

  .focusing-box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .focusing {
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
  }
}
</style>
